<script setup lang="tsx">
import { ElButton, ElMessage } from 'element-plus'
import { adminBusinessInfoApi } from '@/api/MerchantAccount'
import RechargeBillRecord from './components/RechargeBillRecord.vue'
import MemberFeeBillRecord from './components/MemberFeeBillRecord.vue'
import MemberCardBillRecord from './components/MemberCardBillRecord.vue'
import MemberFee from './components/MemberFee.vue'
import MemberCard from './components/MemberCard.vue'
import SubsidyRecharge from './components/SubsidyRecharge.vue'
import PayResult from './components/PayResult.vue'
// import { useTagsView } from '@/hooks/web/useTagsView'

// const { refreshPage } = useTagsView()

const bussinessInfo = ref<any>(null)

const isExpired = computed(() => {
  return (
    (bussinessInfo.value &&
      bussinessInfo.value.memberExpireTime &&
      new Date(bussinessInfo.value.memberExpireTime).getTime() < new Date().getTime()) ||
    false
  )
})

const getDetail = async () => {
  const res = await adminBusinessInfoApi()
  if (res.code === 200) {
    bussinessInfo.value = res.data
  } else {
    ElMessage.error(res.message)
  }
}

const memberFeeDrawer = ref({
  show: false
})
const onCloseDrawer = ({ payAmt, name }) => {
  memberFeeDrawer.value.show = false
  payDrawer.value.payAmt = payAmt
  payDrawer.value.name = name
  payDrawer.value.type = '火动会员'
  payDrawer.value.show = true
}

const cardDrawer = ref({
  show: false,
  payAmt: '',
  cardName: ''
})

const onCloseCardDrawer = ({ payAmt, cardName }) => {
  cardDrawer.value.show = false
  payDrawer.value.payAmt = payAmt
  payDrawer.value.name = cardName
  payDrawer.value.type = '火动次卡'
  payDrawer.value.show = true
}

const subsidyDrawer = ref({
  show: false
})
const onCloseSubsidyDrawer = (data) => {
  if (!data) {
    subsidyDrawer.value.show = false
    refreshPage()
    return
  }
  subsidyDrawer.value.show = false
  payDrawer.value.payAmt = data.payAmt
  payDrawer.value.name = '补贴账户'
  payDrawer.value.type = '充值'
  payDrawer.value.show = true
}

const payDrawer = ref({
  show: false,
  payAmt: '',
  type: '',
  name: ''
})
const onClosePayDrawer = () => {
  payDrawer.value.show = false
  refreshPage()
}

const activeTab = ref('0')
const tabChange = (e) => {
  activeTab.value = e
}
const rechargeTable = ref<any>(null)
const memberFeeTable = ref<any>(null)
const memberCardTable = ref<any>(null)

// 刷新页面数据
const refreshPage = () => {
  getDetail()
  rechargeTable.value && rechargeTable.value.refresh()
  memberFeeTable.value && memberFeeTable.value.refresh()
  memberCardTable.value && memberCardTable.value.refresh()
}

getDetail()
</script>

<template>
  <div class="w-100% h-100%">
    <div v-if="bussinessInfo" class="mb-10px">
      <ContentWrap class="flex-[3]">
        <el-row :gutter="20">
          <el-col :span="11">
            <div class="inline-flex">
              <el-avatar class="mr-12px" :size="88" shape="square" :src="bussinessInfo.logo" />
              <div>
                <div class="text-20px font-700">{{ bussinessInfo.businessName }}</div>
                <div>ID：{{ bussinessInfo.id }}</div>
                <div v-if="bussinessInfo.memberExpireTime">
                  <div v-if="isExpired" class="fs-12">
                    已于 {{ bussinessInfo.memberExpireTime }}过期
                    <el-button
                      v-if="bussinessInfo.financialAccountType === 1"
                      class="ml-20px"
                      type="primary"
                      @click="memberFeeDrawer.show = true"
                    >
                      续费
                    </el-button>
                  </div>
                  <div v-else>
                    有效期至 {{ bussinessInfo.memberExpireTime }}
                    <el-button
                      v-if="bussinessInfo.financialAccountType === 1"
                      class="ml-20px"
                      type="primary"
                      @click="memberFeeDrawer.show = true"
                      >续费</el-button
                    ></div
                  >
                </div>
                <div v-else
                  >未开通<el-button
                    class="ml-20px"
                    type="primary"
                    @click="memberFeeDrawer.show = true"
                    >开通会员</el-button
                  ></div
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </ContentWrap>
    </div>
    <div v-if="bussinessInfo" class="mb-10px">
      <ContentWrap>
        <el-row :gutter="20">
          <el-col :span="8">
            <div>
              <div class="text-36px">{{ bussinessInfo.subsidyAmt }}</div>
              <div>补贴账户余额</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <div class="text-36px">{{ bussinessInfo.waitRechargeSubsidyAmt }}</div>
              <div>
                待充值补贴金额
                <el-button class="ml-20px" type="primary" @click="subsidyDrawer.show = true">
                  充值
                </el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <div class="text-36px">{{ bussinessInfo.activeCount }}</div>
              <div>
                剩余发布次数
                <el-button
                  v-if="bussinessInfo.financialAccountType === 1"
                  class="ml-20px"
                  type="primary"
                  @click="cardDrawer.show = true"
                >
                  购买次卡
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </ContentWrap>
    </div>
    <div v-if="bussinessInfo" class="mb-10px">
      <ContentWrap>
        <el-descriptions title="账户信息">
          <el-descriptions-item label="登录手机号：">{{
            bussinessInfo.mobile
          }}</el-descriptions-item>
          <el-descriptions-item label="注册时间：">{{
            bussinessInfo.createTime
          }}</el-descriptions-item>
          <el-descriptions-item label="最近登录时间：">{{
            bussinessInfo.lastLoginTime
          }}</el-descriptions-item>
        </el-descriptions>
      </ContentWrap>
    </div>
    <div>
      <ContentWrap v-if="bussinessInfo">
        <el-tabs v-model="activeTab" @tab-change="tabChange">
          <el-tab-pane label="充值记录">
            <RechargeBillRecord
              v-if="activeTab === '0'"
              :type="bussinessInfo.financialAccountType"
              ref="rechargeTable"
            />
          </el-tab-pane>
          <el-tab-pane label="续费记录"
            ><MemberFeeBillRecord v-if="activeTab === '1'" ref="memberFeeTable"
          /></el-tab-pane>
          <el-tab-pane label="次卡购买记录"
            ><MemberCardBillRecord v-if="activeTab === '2'" ref="memberCardTable"
          /></el-tab-pane>
        </el-tabs>
      </ContentWrap>
    </div>
    <ElDrawer
      title="火动会员"
      v-model="memberFeeDrawer.show"
      direction="rtl"
      size="650px"
      @close="memberFeeDrawer.show = false"
    >
      <MemberFee @close="onCloseDrawer" />
    </ElDrawer>
    <ElDrawer
      title="火动次卡"
      v-model="cardDrawer.show"
      direction="rtl"
      size="650px"
      @close="cardDrawer.show = false"
    >
      <MemberCard @close="onCloseCardDrawer" />
    </ElDrawer>
    <ElDrawer
      title="补贴充值"
      v-model="subsidyDrawer.show"
      direction="rtl"
      size="650px"
      @close="subsidyDrawer.show = false"
    >
      <SubsidyRecharge :type="bussinessInfo.financialAccountType" @close="onCloseSubsidyDrawer" />
    </ElDrawer>
    <ElDrawer
      title="支付结果"
      v-model="payDrawer.show"
      direction="rtl"
      size="650px"
      @close="onClosePayDrawer"
    >
      <PayResult
        :amount="payDrawer.payAmt"
        :type="payDrawer.type"
        :name="payDrawer.name"
        @cancel="onClosePayDrawer"
        @finish="onClosePayDrawer"
      />
    </ElDrawer>
  </div>
</template>
